<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fns" uri="http://java.sun.com/jsp/jstl/functionss" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Home - BioCode</title>

</head>
<body>
<div id="main">
    <script src="${host}/static/js/highcharts/highcharts.js"></script>
    <script src="${host}/static/js/highcharts/highcharts-more.js"></script>

    <script src="${host}/static/js/highcharts/map.js"></script>
    <script src="${host}/static/js/highcharts/data.js"></script>
    <script src="${host}/static/js/highcharts/world.js"></script>


    <script src="${host}/static/js/highcharts/drilldown.js"></script>
    <div class="row">
        <div class="col-md-6">
            <div id="tools-distribute"></div>
        </div>
        <div class="col-md-6">
            <div id="teches-distribute">

            </div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-6">
            <div id="user-rank"><h4 style="text-align:center">Top Ranked Users</h4>
                <table class="table table-bordered table-hover table-striped">
                    <thead>
                    <tr>
                        <th rowspan="2"></th>
                        <th rowspan="2">User</th>
                        <th colspan="4">Contributed Tools</th>
                    </tr>
                    <tr>
                        <th>Total</th>
                        <th>As Investigator</th>
                        <th>As Developer</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${topUsers}" var="item" varStatus="status">
                    <tr>
                        <td>${status.count}</td>
                        <td><a href="${host}/user/${item.id}">${item.full_name}</a></td>
                        <td>${item.co}</td>
                        <td>${fns:findContributedToolsByCreditRole(item.id,1)}</td>
                        <td>${fns:findContributedToolsByCreditRole(item.id,2)}</td>
                    </tr>
                    </c:forEach>


                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-md-6">
            <div id="org-rank"><h4 style="text-align:center">Top Ranked Organization</h4>
                <table class="table table-bordered table-hover table-striped">
                    <thead>
                    <tr>
                        <th></th>
                        <th>Organization</th>
                        <th>Contributed Tools</th>
                    </tr>
                    </thead>
                    <tbody>

                    <c:forEach items="${topOrgs}" var="item" varStatus="status">
                        <tr>
                            <td>${status.count}</td>
                            <td>${item.name}</td>
                            <td>${item.co}</td>
                        </tr>
                    </c:forEach>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>

    $(function () {
        var tde = document.getElementById('tools-distribute');
        if (tde) {
            $.get("${host}/api/toolsDistribute", function (data) {
                $('#tools-distribute').highcharts('Map', {
                    title: {
                        text: 'Worldwide Tools Distribution',
                    },
                    chart: {
                        backgroundColor: '#FAFAFA',
                        style: {
                            fontFamily: 'Arial',
                        }
                    },
                    mapNavigation: {
                        enabled: false,
                        enableDoubleClickZoomTo: false
                    },
                    colorAxis: {
                        min: 1,
                        max: 1000,
                        type: 'logarithmic'
                    },
                    credits: {
                        enabled: false
                    },
                    series: [{
                        data: data,
                        mapData: Highcharts.maps["custom/world"],
                        joinBy: ['iso-a2', 'code'],
                        name: 'Number of tools in ',
                        states: {
                            hover: {
                                color: '#BADA55'
                            }
                        },
                        tooltip: {
                            valueSuffix: ''
                        }
                    }]
                });
            });
           $.get("${host}/api/techDistribute", function (data) {
                $('#teches-distribute').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: 'Technologies Usage'
                    },
                    tooltip: {
                        headerFormat: '{series.name}<br>',
                        pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Usage of',
                        data: data
                    }]
                });
            });
        }
    });
</script>
</body>
</html>
